<!DOCTYPE html>
<html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Example</title>
  <meta name="author" content="komasshu">
  <script type="text/javascript" src="nerine/jquery.js"></script>
  <script type="text/javascript" src="nerine/nerine.js"></script>
  <script src="extop.js"></script>
  <link rel="stylesheet" type="text/css" href="nerine/nerine.css">
  <link rel="stylesheet" type="text/css" href="nerine/example.css">
</head><body>
<article>

<section id="title">
  <h1>Nerine</h1>
  <p>Simple HTML5 Presentation Tool</p>
  <aside id="keydesc">
    <p>→ : next page</p>
    <p>← : prev page</p>
  </aside>
</section>

<section>
  <h2>Support Browser</h2>
  <ul>
    <li>Safari 4</li>
    <li>Google Chrome 5</li>
    <li>Firefox 3.6(not full support)</li>
  </ul>
</section>

<section>
  <h2>Key Config(defalut)</h2>
  <p>→ : next page</p>
  <p>← : prev page</p>
  <p>↑ : index</p>
</section>

<section>
  <h2>How To Use</h2>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;&lt;head&gt;
  &lt;title&gt;Example&lt;/title&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="nerine.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="nerine.css"&gt;
&lt;/head&gt;&lt;body&gt;
&lt;article&gt;
  &lt;section&gt;
    write some page
  &lt;/section&gt;
&lt;/article&gt;
&lt;/body&gt;&lt;/html&gt;
</code></pre>
</section>

<section id="kawaui">
  <h2>Customizable: Effect</h2>
  <pre><code>[effect=kawaui] {
  display: block;
  position: absolute;
  bottom: -300px;
  right: 1em;
  -webkit-trasition: bottom 0.5s linear;
}
[effect=kawaui][effected] {
  bottom: 0;
}</code></pre>
  <img src="kawaui.jpg" effect="kawaui">
  <p effect="delay">so cute!<br><a href="http://www.pixiv.net/member_illust.php?mode=medium&illust_id=6286701">image by pixiv</a></p>
</section>

<section>
  <h2>Customizable: KeyConfig</h2>
  <pre><code>Nerine.keyconfig = {
  nextPage: [ your like keycode ]
}</code></pre>
</section>

<section>
  <h2>Page Jump</h2>
  <p><a href="#p0">go to Top page</a></p>
  <p><a href="#kawaui">go to #kawaui</a></p>
</section>

<section>
  <h2>Change Aspect</h2>
  <p>press <kbd>A</kbd> key or <a href="javascript:Nerine.toggleAspect();">click here</a></p>
  <p>default aspect is 4:3(SDTV)</p>
</section>

<section>
  <h2>Reload</h2>
  <p>press <kbd>R</kbd> key or <a href="javascript:Nerine.reload();">click here</a></p>
</section>

<section id="thankyou">
  <p>Enjoy!</p>
</section>

</article>


</body>
